<%@page contentType="text/html;charset=UTF-8"%>
<%@include file="../../common.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Project Infor</title>
	<link href="${ctx}/resources/css/project/project.css" rel="stylesheet">
	<link href="${ctx}/resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
	<link href="${ctx}/resources/css/bootstrap/bootstrap.min.css" rel="stylesheet">
	<script type="text/javascript" src="${ctx}/resources/js/jquery/jquery-1.12.0.min.js"></script>
	<script type="text/javascript" src="${ctx}/resources/js/bootstrap/bootstrap.min.js"></script>
	<c:set var="active" value="variables"/>

</head>
<body>
	<div class="container">
		<div class="row">

		<div class="col-md-10">
			<div class="bs-callout help-callout">
				<p>
					Pod配置-<c:if test="${pod.status.phase!='Running'}">	${pod.status.containerStatuses}</c:if>
				</p>
			</div>
			<form accept-charset="UTF-8" action="${ctx}/pod/savePod" class="form-horizontal" id="edit" method="post">
				<div style="display:none">
				<input name="id" type="hidden" value="${server.id}">
				</div>
				<fieldset>
				<div class="form-group">
					<label class="control-label" for="name">名称</label>
					<div class="col-sm-10">
						<input class="form-control" id="name" name="name" required type="text" value="${pod.metadata.name}">
					</div>
				</div>
				<div class="form-group">
					<label class="control-label" for="node">Nodeds</label>
					<div class="col-sm-10">
						<!--input class="form-control" id="ip" name="ip" required type="text" value="${pod.spec.nodeName}"-->
						<select class="form-control" id="node" name="node">
							<c:forEach items="${nodes.items}" var="node" varStatus="nodeStatus">
						 	<option value="${node.metadata.name}">${node.metadata.name}</option>
							</c:forEach>
					     </select>
						<div class="light">Host：${pod.status.hostIP}(${pod.status.podIP})</div>
					</div>
				</div>
				<div class="form-group">
					<label class="control-label" for="namespace">Namespaces</label>
					<div class="col-sm-10">
						<!--input class="form-control" id="port" name="port" type="text" value="${pod.metadata.namespace}"-->
						<select class="form-control" id="namespace" name="namespace">
							<c:forEach items="${namespaces.items}" var="ns" varStatus="nsStatus">
						 	<option value="${ns.metadata.name}">${ns.metadata.name}</option>
							</c:forEach>
					     </select>
					</div>
				</div>
				<div class="form-group">
					<label class="control-label" for="ready">Ready</label>
					<div class="col-sm-10">
						<select class="form-control" id="ready" name="ready">
							<option value=""></option>
						 	<option value="True">True</option>
							<option value="False">False</option>
							<option value="Unknown">Unknown</option>
					     </select>
					</div>
				</div>
				<div class="form-group">
					<label class="control-label" for="status">Status</label>
					<div class="col-sm-10">
						<select class="form-control" id="status" name="status">
							<option value=""></option>
						 	<option value="Pending">Pending</option>
							<option value="Running">Running</option>
							<option value="Succeeded">Succeeded</option>
							<option value="Failed">Failed</option>
							<option value="Unknown">Unknown</option>
					     </select>
					</div>
				</div>
				<div class="form-group">
					<label class="control-label" for="serverName">dnsPolicy</label>
					<div class="col-sm-10">
						<input class="form-control" id="dnsPolicy" name="dnsPolicy" required type="text" value="${pod.spec.dnsPolicy}">
					</div>
				</div>
				<div class="form-group">
					<label class="control-label" for="serverName">restartPolicy</label>
					<div class="col-sm-10">
						<select class="form-control" id="restartPolicy" name="restartPolicy">
							<option value=""></option>
						 	<option value="Always">Always</option>
							<option value="OnFailure">OnFailure</option>
							<option value="Never">Never</option>
					     </select>
					</div>
				</div>
				<div class="form-group">
					<label class="control-label" for="description">labels</label>
					<div class="col-sm-10">
						<textarea class="form-control" id="labels" name="labels" rows="4">${pod.metadata.labels}</textarea>
					</div>
				</div>
				</fieldset>
				<fieldset>
					<div class="table-responsive">
						<table class="table table-striped table-hover">
							<thead>
							<tr>
								<th>#序号</th>
								<th>Name<a href="javascript:viewContainer('');"><i class="fa fa-plus fa-fw"></i></a></th>
								<th>Image</th>
								<th>hostPort</th>
								<th>containerPort</th>			
								<th>protocol</th>
								<th>imagePullPolicy</th>
							</tr>
							</thead>
							<tbody>
							<c:forEach items="${pod.spec.containers}" var="container" varStatus="containerStatus">
								<tr>
									<td>${containerStatus.index + 1}</td>
									<td><span><a  href="javascript:viewContainer('${container.name}')">${container.name}</a></span></td>
									<td>${container.image}</td>
									<td>${container.ports[0].hostPort}&nbsp;</td>
									<td>${container.ports[0].containerPort}&nbsp;</td>		
									<td>${container.ports[0].protocol}&nbsp;</td>
									<td><span class="label label-info">${container.imagePullPolicy}&nbsp;</span></td>
								</tr>
							</c:forEach>
							</tbody>
						</table>            
					  </div>
				</fieldset>
			
				<div class="form-actions">
					<input class="btn btn-save" name="commit" type="button" onClick="doSave();"  value="Save changes">
					<a class="btn pull-right" href="${ctx}/k8/">返回</a>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">Container设置</h4>
         </div>
         <div class="modal-body">		 
		 	<form accept-charset="UTF-8" action="${ctx}/pod/save" class="form-horizontal" id="editCon" method="post">
				<div style="display:none">
					<input name="container_old_name" id="container_old_name" type="hidden" value="">
				</div>
				<fieldset>
					<div class="form-group">
						<label class="control-label" for="container_name">name</label>
						<div class="col-sm-10">
							<input class="form-control" id="container_name" name="container_name" required type="text" value="">
						</div>
					</div>
					<div class="form-group">
						<label class="control-label" for="container_image">image</label>
						<div class="col-sm-10">
							<input class="form-control" id="container_image" name="container_image" required type="text" value="">
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-1" for="container_hostPort">hostPort</label>
						<div class="col-sm-2">
							<input class="form-control" id="container_hostPort" name="container_hostPort" required type="number" value="">
						</div>

						<label class="control-label col-sm-1" for="container_containerPort" style="padding-left: 0;">containerPort</label>
						<div class="col-sm-2">
							<input class="form-control" id="container_containerPort" name="container_containerPort" required type="number" value="">
						</div>

						<label class="control-label col-sm-1" for="container_protocol">protocol</label>
						<div class="col-sm-2">
							<select class="form-control" id="container_protocol" name="container_protocol" style="padding-left: 0;">
								<option value=""></option>
								<option value="UDP">UDP</option>
								<option value="TCP">TCP</option>
					     	</select>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-1" for="container_hostPort2">hostPort</label>
						<div class="col-sm-2">
							<input class="form-control" id="container_hostPort2" name="container_hostPort2" required type="number" value="">
						</div>

						<label class="control-label col-sm-1" for="container_containerPort2" style="padding-left: 0;">containerPort</label>
						<div class="col-sm-2">
							<input class="form-control" id="container_containerPort2" name="container_containerPort2" required type="number" value="">
						</div>

						<label class="control-label col-sm-1" for="container_protocol2">protocol</label>
						<div class="col-sm-2">
							<select class="form-control" id="container_protocol2" name="container_protocol2" style="padding-left: 0;">
								<option value=""></option>
								<option value="UDP">UDP</option>
								<option value="TCP">TCP</option>
					     	</select>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-1" for="container_cpu">Cpu</label>
						<div class="col-sm-2">
							<input class="form-control" id="container_cpu" name="container_cpu" required type="text" value="">
						</div>

						<label class="control-label col-sm-1" for="container_mem" style="padding-left: 0;">Mem</label>
						<div class="col-sm-2">
							<input class="form-control" id="container_mem" name="container_mem" required type="text" value="">
							<div class="light">min:4Mi</div>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label" for="container_imagePullPolicy">Policy</label>
						<div class="col-sm-10">
							<select class="form-control" id="container_imagePullPolicy" name="container_imagePullPolicy">
								<option value="IfNotPresent">IfNotPresent</option>
								<option value="Always">Always</option>
								<option value=":latest">:latest</option>
					     	</select>
							<div class="light">imagePullPolicy</div>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label" for="container_args">Args</label>
						<div class="col-sm-10">
							<textarea class="form-control" id="container_args" name="container_args" rows="4"></textarea>
						</div>
					</div>
				</fieldset>
			</form>            
         </div><!-- body end -->
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" onClick="addContainer();">确定</button>
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->

<script language="javascript">
	var containers = [];
	
	setStatus('${pod.status.phase}');
	setReady('${pod.status.conditions[0].status}');
	setNodes('${pod.spec.nodeName}');
	setNS('${pod.metadata.namespace}');
	setRestartPolicy('${pod.spec.restartPolicy}');
	
	
	function setStatus(status){
		$("#status").find("option[value='"+status+"']").attr("selected",true);
	}
	
	function setReady(type){
		$("#ready").find("option[value='"+type+"']").attr("selected",true);
	}
	
	function setNodes(node){
		$("#node").find("option[value='"+node+"']").attr("selected",true);
	}
	function setNS(ns){
		$("#namespace").find("option[value='"+ns+"']").attr("selected",true);
	}
	function setRestartPolicy(restartPolicy){
		$("#restartPolicy").find("option[value='"+restartPolicy+"']").attr("selected",true);
	}
	
	
	function doSave(){
	
		if($('#name').val()==''){
			alert('container name 不能为空.');
			return ;
		}
		
		if(containers.length<1){
			alert('container 不能为空.');
			return ;
		}
		
		var pod = {};
		pod.metadata={};
		pod.spec = {};
		pod.status={};
		
		pod.metadata.name = $('#name').val();
		pod.spec.nodeName = $('#node').val();		
		pod.metadata.namespace = $('#namespace').val();
		pod.status.phase = $('#status').val();
		pod.spec.dnsPolicy = $('#dnsPolicy').val();
		pod.spec.restartPolicy = $('#restartPolicy').val();
		pod.spec.containers=containers;
		if($('#labels').val() !=''){
			pod.metadata.labels = parseLabel();
		}

		$.ajax({
		  type: 'POST',
		  url: ctx+'/pod/savePod',
		  data: JSON.stringify(pod),
		  contentType: "application/json; charset=UTF-8",
		  success: function(data){
		  	alert('保存成功.');
		  },
		  dataType: 'json'
		});
	}
	
	function parseLabel(){
		var labels = $('#labels').val();
		var result = {};
		
		if(labels != ''){
			labels = labels.replace("{","")
			labels = labels.replace("}","")
			var labelItems = labels.split(",");
			if(labelItems.length>0){
				for(var i=0; i < labelItems.length;i++){
					var kv = labelItems[i].split("=");
					result[kv[0]]=kv[1];
				}
			}
		}
		return result;
	}
	
	function addContainer(){
		if($('#container_name').val()==''){
			alert('container name 不能为空.');
			return;
		} 
		if($('#container_image').val()==''){
			alert('container image 不能为空.');
			return;
		}
		
		for(var i=0;i<containers.length;i++){
			if(containers[i].name==$('#container_old_name').val()){
				containers.splice(i,1);
			}
		}
		
		var container ={};
		container.name = $('#container_name').val();
		container.image = $('#container_image').val();
		//container.args = $('#container_args').val();
		container.imagePullPolicy = $('#container_imagePullPolicy').val();
		
		
		var port = {};
		
		if($('#container_hostPort').val() !=''){
			port.hostPort = $('#container_hostPort').val();
		}
		
		if($('#container_containerPort').val() !=''){
			port.containerPort = $('#container_containerPort').val();
		}
		
		if($('#container_protocol').val() !=''){
			port.protocol = $('#container_protocol').val();
		}
		
		/**
		*
		*/
		
		var port1 = {};
		
		if($('#container_hostPort2').val() !=''){
			port1.hostPort = $('#container_hostPort2').val();
		}
		
		if($('#container_containerPort2').val() !=''){
			port1.containerPort = $('#container_containerPort2').val();
		}
		
		if($('#container_protocol2').val() !=''){
			port1.protocol = $('#container_protocol2').val();
		}
		/**
		* ports.
		*/
		if(port.hostPort != undefined || port.containerPort != undefined || port.protocol != undefined
			|| port1.hostPort != undefined || port1.containerPort != undefined || port1.protocol != undefined){
			container.ports=[];
			
			if(port.hostPort != undefined || port.containerPort != undefined || port.protocol != undefined){
				container.ports.push(port);
			}
			
			if(port1.hostPort != undefined || port1.containerPort != undefined || port1.protocol != undefined){
				container.ports.push(port1);
			}
		}
		/**
		* resources
		*/
		if($('#container_cpu').val() !='' || $('#container_mem').val()!='' ){
			//data.data[i].resources.limits.cpu
			container.resources={};
			container.resources.limits={};
			
			if($('#container_cpu').val() !=''){
				container.resources.limits.cpu=  $('#container_cpu').val();
			}
			
			if($('#container_mem').val() !=''){
				container.resources.limits.memory= $('#container_mem').val();
			}
		}		
		
		
		containers.push(container);
		
		$('#myModal').modal('hide');
	}
	
	function viewContainer(containerName){
		
		$('#editCon')[0].reset();	
		
		$.getJSON(ctx+'/pod/viewContainer?name=${pod.metadata.name}&namespace=${pod.metadata.namespace}',function (data){
			if(data != null && data.data != null){
				containers = data.data;
				
				for(var i=0;i<data.data.length;i++){
					if(data.data[i].name==containerName){
						$('#container_old_name').val(data.data[i].name);
						$('#container_name').val(data.data[i].name);
						$('#container_image').val(data.data[i].image);
						
						if(data.data[i].ports.length==1){
							$('#container_hostPort').val(data.data[i].ports[0].hostPort);
							$('#container_containerPort').val(data.data[i].ports[0].containerPort);
							$('#container_protocol').val(data.data[i].ports[0].protocol);
						}
						if(data.data[i].ports.length==2){
							$('#container_hostPort').val(data.data[i].ports[0].hostPort);
							$('#container_containerPort').val(data.data[i].ports[0].containerPort);
							$('#container_protocol').val(data.data[i].ports[0].protocol);
							
							$('#container_hostPort2').val(data.data[i].ports[1].hostPort);
							$('#container_containerPort2').val(data.data[i].ports[1].containerPort);
							$('#container_protocol2').val(data.data[i].ports[1].protocol);
						}
						$('#container_args').val(data.data[i].args);
						$('#container_imagePullPolicy').val(data.data[i].imagePullPolicy);

						if(data.data[i].resources !=null && data.data[i].resources.limits !=null && data.data[i].resources.limits.cpu!=null){
							$('#container_cpu').val(data.data[i].resources.limits.cpu);
							$('#container_mem').val(data.data[i].resources.limits.memory);
						}
						//
						
					}
				}
			}
			$('#myModal').modal();			
		});	
		
	}
</script>
</body>
</html>
